<template>
  <a-modal
    :title="modalTitle"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="终端标识" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['clientId', {rules: [{required: true, min: 3, message: '请输入至少三个字符的规则！'}]}]" disabled />
        </a-form-item>

        <a-form-item label="TOKEN有效期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number style="width: 100%;" :min="-1" v-decorator="['accessTokenValidity',{rules: [{required: true, message: '请输入有效期'}],initialValue:-1}]" />
        </a-form-item>

        <a-form-item label="终端秘钥" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['clientSecret', {rules: [{required: true, min: 3,max:8, message: '请输入3-8字符的规则！'}]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { update } from '@/api/system/clients'
import pick from 'lodash.pick'
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
     modalTitle: '',
     modalOpera: 0, // 0：新增 1：编辑
     visible: false,
     confirmLoading: false,
     form: this.$form.createForm(this)
    }
  },
	created () {
	},
  methods: {
		edit (record) {
		   this.modal('设置秘钥', 1)
       const _this = this
       setTimeout(() => {
          _this.form.setFieldsValue(pick(record, 'clientId', 'accessTokenValidity'))
       }, 200)
		},
		modal (title, opera) {
			this.modalTitle = title
			this.modalOpera = opera
			this.visible = true
			this.form.resetFields()
		},
        handleSubmit () {
          const { form: { validateFields } } = this
          this.confirmLoading = true
          validateFields((errors, values) => {
            if (!errors) {
                   if (this.modalOpera === 1) {
                         update(values).then(response => {
                         this.$message.info(response.msg)
                         this.$emit('ok')
                         this.handleCancel()
                        })
                    }
            }
            this.confirmLoading = false
          })
        },
        handleCancel () {
            this.visible = false
            this.confirmLoading = false
        }
  }
}
</script>
